<template>
    <view :class="$style.box">
        <nut-button shape="square" block type="primary">
            <template #icon>
                <Scan2 />
            </template>
            添加设备
        </nut-button>
        <view class="m-t-10">
            <view class="f-24" @click="onInputDeviceId">手动输入</view>
        </view>
    </view>

    <!-- <nut-dialog teleport="#app" title="输入设备号" :visible="visible" @cancel="onCancel" @ok="onOk" content="asdfds"></nut-dialog> -->
</template>

<script lang="ts" setup>
	import { bindApi } from '@/api/Device';
import { hideLoading, showLoading, showModal, showToast } from '@/utils/framework';
import { Scan2 } from '@nutui/icons-vue-taro'
    import { ref } from 'vue';

    const emit = defineEmits<{
        (e: 'bind'): void
    }>()

    const visible = ref(false)
    const deviceId = ref()

    function onInputDeviceId() {
        //visible.value = true
        showModal({
            title : '输入设备号',
            editable : true,
            success(res) {
                if(res.confirm) {
                    bindDevice(res.content)
                }
                
            }
        })
    }

    async function bindDevice(id:number) {
        showLoading()
        const r = await bindApi(id)
        hideLoading()
        if(r.success) {
            emit('bind')
        }else {
            showToast(r.msg)
        }
    }

</script>

<style lang="scss" module>
    .box{
        width: 300px;
        margin: auto;
    }
</style>